<template>
  <div class="notice">
    <Panel>
      <div class="notice-title">{{ detailData.title }}</div>
      <div class="notice-content">{{ detailData.content }}</div>
    </Panel>
  </div>
</template>

<script>
import { Panel } from 'components'
import { getNoticeDetail, setReadNotice } from 'services/notice'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'MyNoticeDetail',
  components: {
    Panel
  },
  data() {
    return {
      noticeId: null,
      detailData: {}
    }
  },
  computed: {
    ...mapState(['unreadNoticeCount'])
  },
  methods: {
    ...mapMutations({
      setUnreadNoticeCount: 'setUnreadNoticeCount'
    }),
    async getDetail() {
      try {
        this.loading = true
        const id = this.noticeId
        const { data } = await getNoticeDetail({ id })
        this.detailData = data
        !this.detailData.readed && this.setRead()
      } finally {
        this.loading = false
      }
    },
    async setRead() {
      const id = this.noticeId
      await setReadNotice({ id })
      if (this.unreadNoticeCount > 1) {
        this.setUnreadNoticeCount(this.unreadNoticeCount - 1)
      }
    }
  },
  created() {
    this.noticeId = this.$route.params.id
    this.getDetail()
  }
}
</script>

<style lang="scss" scoped>
@import 'styles/common.scss';
.notice {
  .notice-title {
    font-size: 16px;
    color: $colorText1;
  }
  .notice-content {
    margin-top: 0.32rem;
    font-size: 14px;
    line-height: 20px;
    color: $colorText2;
  }
}
</style>
